<!--
 * @Author: Wanderer
 * @Date: 2022-04-26 21:06:51
 * @LastEditors: Wanderer
 * @LastEditTime: 2023-03-13 20:30:23
 * @FilePath: \pico_link_II\src\upload_script.html
 * @Description: 
-->

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Pico Link II 参数配置</title>
</head>

<body>
    <table class="fixed" border="0">
        <col width="1000px" />
        <col width="500px" />
        <h3>Pico Link II 参数配置</h3>
        <div>
            <label for="name">WiFi账号</label>
            <input type="text" id="SSID" name="SSID" placeholder="请输入">
            <br>
            <br>
            <label for="type">WiFi密码</label>
            <input type="text" id="PWD" name="PWD" placeholder="请输入">
            <br>
            <br>
            <label for="type">与下位机通信模式(0:UART,1:SPI)</label>
            <input type="text" id="protocol" name="protocol" placeholder="请输入">
            <br>
            <br>
            <label for="type">UART波特率</label>
            <input type="text" id="uartSpeed" name="uartSpeed" placeholder="请输入">
            <br>
            <br>
            <label for="type">与上位机通信模式(0:UDP,1:TCP)</label>
            <input type="text" id="socket" name="socket" placeholder="请输入">
            <br>
            <br>
            <label for="type">server ip地址</label>
            <input type="text" id="hostIP" name="hostIP" placeholder="请输入">
            <br>
            <br>
            <label for="type">server 端口</label>
            <input type="text" id="port" name="port" placeholder="请输入">
            <br>
        </div>
        <br>
        <button id="get_info" type="button" onclick="get_info()">查询配置信息</button>
        <br>
        <br>
        <button id="send_config" type="button" onclick="send_config()">提交并烧录进Flash</button>
    </table>
</body>
<script>
    var isGetInfo = false; //是否查询了信息

    function get_info() {
        alert("开始查询");
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "/info", true);
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == XMLHttpRequest.DONE) {
                if (xhttp.status == 200) {
                    var responseText = xhttp.responseText;//返回结果
                    if (responseText.length > 0) {
                        alert("查询成功！");
                        isGetInfo = true;
                        var obj = JSON.parse(responseText);
                        document.getElementById("SSID").value = obj["SSID"];
                        document.getElementById("PWD").value = obj["PWD"];
                        document.getElementById("protocol").value = obj["protocol"];
                        document.getElementById("uartSpeed").value = obj["uartSpeed"];
                        document.getElementById("socket").value = obj["socket"];
                        document.getElementById("hostIP").value = obj["hostIP"];
                        document.getElementById("port").value = obj["port"];
                    }
                }
                else if (xhttp.status == 0) {
                    alert("Server closed the connection abruptly!");
                    location.reload()
                } else {
                    alert(xhttp.status + " Error!\n" + xhttp.responseText);
                    location.reload()
                }
            }
        };
        xhttp.send(null);
    }

    function send_config() {
        if (isGetInfo == false) {
            alert("请先查询配置信息！");
            return;
        }

        var SSID = document.getElementById("SSID").value;
        if (SSID.length == 0 || SSID.length > 32) {
            alert("WiFi名称不为空且不应超过32位!");
            return;
        }
        var PWD = document.getElementById("PWD").value;
        if (PWD.length == 0 || PWD.length > 64) {
            alert("WiFi密码不应为空且不应超过64位!");
            return;
        }
        var protocol = parseInt(document.getElementById("protocol").value);
        if (protocol != 0 && protocol != 1) {
            alert("与下位机通信模式应取0或1!");
            return;
        }
        var uartSpeed = parseInt(document.getElementById("uartSpeed").value);
        if (uartSpeed <= 0 || uartSpeed > 5000000) {
            alert("UART波特率应为小于等于5000000的正数!");
            return;
        }
        var socket = parseInt(document.getElementById("socket").value);
        if (socket != 0 && socket != 1) {
            alert("与上位机通信模式应取0或1!");
            return;
        }
        var hostIP = document.getElementById("hostIP").value;
        if (!validIPAddress(hostIP)) {
            alert("server ip地址不是有效的Ipv4地址!");
            return;
        }
        var port = parseInt(document.getElementById("port").value);
        if (port <= 0 || port > 65535) {
            alert("server 端口应为小于等于65535的正数!");
            return;
        }

        alert("开始提交");
        var xhttp = new XMLHttpRequest();
        xhttp.open("POST", "/config", true);
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4) {
                if (xhttp.status == 200) {
                    var responseText = xhttp.responseText.toString();//返回结果
                    if (responseText == "success") {
                        alert("提交成功！");
                    }
                } else if (xhttp.status == 0) {
                    alert("Server closed the connection abruptly!");
                    location.reload()
                } else {
                    alert(xhttp.status + " Error!\n" + xhttp.responseText);
                    location.reload()
                }
            }
        };
        var data = {
            "SSID": SSID,
            "PWD": PWD,
            "protocol": protocol,
            "uartSpeed": uartSpeed,
            "socket": socket,
            "hostIP": hostIP,
            "port": port,
        }
        xhttp.send(JSON.stringify(data));
    }

    var validIPAddress = function (queryIP) {
        if (queryIP.indexOf('.') >= 0) {
            // IPv4
            let last = -1;
            for (let i = 0; i < 4; ++i) {
                const cur = (i === 3 ? queryIP.length : queryIP.indexOf('.', last + 1));
                if (cur < 0) {
                    return false;
                }
                if (cur - last - 1 < 1 || cur - last - 1 > 3) {
                    return false;
                }
                let addr = 0;
                for (let j = last + 1; j < cur; ++j) {
                    if (!isDigit(queryIP[j])) {
                        return false;
                    }
                    addr = addr * 10 + (queryIP[j].charCodeAt() - '0'.charCodeAt());
                }
                if (addr > 255) {
                    return false;
                }
                if (addr > 0 && queryIP[last + 1].charCodeAt() === '0'.charCodeAt()) {
                    return false;
                }
                if (addr === 0 && cur - last - 1 > 1) {
                    return false;
                }
                last = cur;
            }
            return true;
        } else {
            return false;
        }
    };

    const isDigit = (ch) => {
        return parseFloat(ch).toString() === "NaN" ? false : true;
    }


</script>